<!-- 引用模板 -->
<template>
  <div class="dashboard-container">
    <div style="color:#999;margin-bottom:3px">*注: 当天统计数据</div>
    <panel-group :panel-data="indexTop"></panel-group>
    <!-- //这里是柱状图 -->
    <el-row style="background:#fff;padding:15px;margin-bottom:15px;">
      <div class="filter-container">
        <el-date-picker v-model="search.line_month" type="month"  placeholder="选择-年-月" value-format="yyyy-MM-01 00:00:00" class="filter-item"></el-date-picker>
        <el-button class="filter-item" plain icon="el-icon-search" @click="handleFilter">搜索</el-button>
      </div>
      <mix-chart ref="chartData" v-loading="listLoading"></mix-chart>
    </el-row>
  </div>
</template>
<script>

import PanelGroup from './components/panelGroup'
import MixChart from './components/mixChart'
import { mapGetters } from 'vuex'
import * as api from '@/api/main-api' // API

export default {
  name: 'dashboard',

  components: { PanelGroup, MixChart },
  computed: {
    ...mapGetters([
      'outlet_id'
    ])
  },

  data() {
    return {
      chartData: {},
      indexTop: {
        finish: 0,
        // online: 0, // 暂时没有用到
        underway: 0,
        total_goods: 0,
        total_amount: 0
      },
      // 长带参数
      listQuery: {
        unit_id: 0
      },
      // 搜索字段
      search: {
        line_month: ''
      },
      listLoading: false
    }
  },

  // 初始化数据
  created() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.listQuery.unit_id = this.outlet_id
        this.fetchData()
      }, 200)
    })
  },

  // 方法
  methods: {
    // 折线图搜索结果
    handleFilter() {
      // 复制一个对象<br>var obj = { a: 1 ,b:2};
      this.listQuery = Object.assign(this.listQuery, this.search)
      this.fetchData()
    },

    // 获取数据
    fetchData() {
      this.listLoading = true
      api.homeLineApi(this.listQuery).then(response => {
        if (response.data.code === 0) {
          this.indexTop = response.data.total_top
          this.chartData = response.data.data
        }
        // 调用折线图方法
        this.$refs.chartData.setProps(this.chartData)
        this.listLoading = false
      })
    }
  },

  // 监事事件
  watch: {
    outlet_id(id) {
      this.$nextTick(() => {
        setTimeout(() => {
          this.listQuery.unit_id = id
          if (id !== 0) {
            this.fetchData()
          }
        }, 20)
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background-color: rgb(240, 242, 245);
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}
</style>
